<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019/4/28
  Time: 17:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>Home</title>
    <link href="home/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css">
        p{
            margin: 10px 10px 15px 10px;
        }
        .con4 {
            width: 300px;
            height: auto;
            overflow:hidden;
            margin: 30px auto;
            color: #FFFFFF;
        }

        .con4 .btn {
            width:68%;
            height: 40px;
            line-height: 30px;
            text-align: center;
            background: #de995e;
            display: block;
            font-size: 15px;
            border-radius: 3px;
        }

        .upload {
            float: left;
            position: relative;
            margin: 5px 80px 80px 80px;
        }

        .upload_pic {
            display: block;
            width: 100%;
            height: 40px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            border-radius: 5px;
        }

        #cvs {
            border: 1px solid #fff;
            margin:80px 80px 15px 80px
        }
        a{
            display: inline-block;
            height: 40px;
            margin: 5px;
            padding: 16px 20px 0 20px;
            background: #de995e;
            font-size: 16px;
            font-weight: 300;
            line-height: 16px;
            color: #fff;
            text-decoration:none;
            -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
            border: none;
        }
        a:hover{
            text-decoration:none;
            outline: 0;
            opacity: 0.6;
            color: #fff;
        }
        body{
            background: no-repeat 0px 0px url("home/images/6.jpg");
            background-size:cover;
        }
    </style>

</head>
<body>
<div style="float: right">
    <a href="http://localhost:8080/login.jsp">退出</a>
</div>
<div>
    <div>
        <div class="con4" style="float: left">
            <canvas id="cvs" width="200" height="180"></canvas>
            <span class="btn upload">上传头像<input type="file" class="upload_pic" id="upload" /></span>
        </div>
        <script>
            var input1 = document.getElementById("upload");
            if(typeof FileReader === 'undefined') {
                input1.setAttribute('disabled', 'disabled');
            } else {
                input1.addEventListener('change', readFile, false);

            }
            function readFile() {
                var file = this.files[0];
                if(!/image\/\w+/.test(file.type)) {
                    alert("文件必须为图片！");
                    return false;
                }
                // console.log(file);
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    var image = new Image();
                    image.src = e.target.result;
                    var max = 200;
                    image.onload = function() {
                        var canvas = document.getElementById("cvs");
                        var ctx = canvas.getContext("2d");
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.drawImage(image, 0, 0, 200, 200);
                    };
                }
            };
        </script>
    </div>
</div>
<div>
    <div>
        <div>
            <div class="col-md-6 study-grid" style="color:#fff; margin: 80px 0px 150px 200px">
                <h3><strong>个人信息</strong></h3>
                <hr>
                <div>
                    <p>用户名：西瓜</p>
                    <p>账户：xigua</p>
                    <p>性别：女</p>
                    <p>QQ邮箱:xigua@qq.com</p>
                    <p>莞工账户:201741412115</p>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>
